<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/ajax.js"></script>
    <style>
        ul {
            padding: 0;
            margin: 0;
            list-style-type: none;
            width: 300px;
        }

        ul li.title {
            background-color: #eee;
            font-weight: 700;
        }

        ul li {
            padding: 5px 10px;
        }

        ul li span {
            display: inline-block;
            width: 120px;
        }
    </style>
</head>

<body>
    <div>
        <button id="btnSend">GET请求</button>
        <button id="btnSend2">POST请求</button>
        <button id="btnSend3">综合请求</button>
    </div>
    <ul id="ul">
        <li>...</li>
    </ul>
    <ul id="data">
        <li>...</li>
    </ul>
    <ul id="ul2">
        <li>...</li>
    </ul>
    <script>
        var btnSend = document.getElementById('btnSend')
        var btnSend2 = document.getElementById('btnSend2')
        var btnSend3 = document.getElementById('btnSend3')
        btnSend.onclick = function () {
            // 对异步请求封装函数的调用
            myajax('http://www.rttop.cn/api/?day=4-2&type=car', 'GET', null, function (d) {
                // 转成对象的格式
                var resdata = eval('(' + d + ')')
                console.log(resdata.data.batchs)
                // 调用显示数据的函数
                showData(resdata,document.getElementById('ul'))
            })
        }
        function showData(d, ele) {
            // 保存需要显示的数组对象
            var arrRes = d.data.batchs
            // 定义一个保存遍历结果的对象
            var HTML = '<li class="title"><span>型号</span><span>名称</span></li>'
            // 遍历数组对象获取每一项的内容
            for (var i = 0; i < arrRes.length; i++) {
                HTML += '<li><span>' + arrRes[i].code + '</span><span>' + arrRes[i].name + '</span></li>'
            }
            // 将遍历后的结果赋值给页面元素ul
            ele.innerHTML = HTML
        }

        btnSend2.onclick=function(){
            myajax('http://www.rttop.cn/api/?day=2','POST','name=张三',function(d){
                document.getElementById('data').innerHTML=d
            })
        }
        btnSend3.onclick=function(){
            myajax('http://www.rttop.cn/api/?day=4-4&type=html5','GET',null,function(d){
                var resdata=eval('('+d+')')
                showData3(resdata,document.getElementById('ul2'))
            })
        }

        function showData3(d, ele) {
            // 保存需要显示的数组对象
            var arrRes = d
            // 定义一个保存遍历结果的对象
            var HTML = '<li class="title"><span>图片</span><span>名称</span><span>特征</span></li>'
            // 遍历数组对象获取每一项的内容
            for (var i = 0; i < arrRes.length; i++) {
                HTML += '<li><img style="width:60px" src="' + arrRes[i].url + '"/><span>' + arrRes[i].name + '</span><span>' + arrRes[i].feature + '</span></li>'
            }
            // 将遍历后的结果赋值给页面元素ul
            ele.innerHTML = HTML
        }
    </script>
</body>

</html>